<template>
	<view class="waimian">
		<view class="pwdhead">
			<view class="box">
				<view class="timesc" @click="showtime"><text>{{date?date:'选择时间段'}}</text>
					<image src="../static/down.png" mode=""></image>
				</view>
				<view class=""></view>
			</view>
			<view class="title">
				<view :class="titindex==0?'active':''" @click="settitindex(0)"><text>全部</text></view>
				<view :class="titindex==1?'active':''" @click="settitindex(1)"><text>待帮买</text></view>
				<view :class="titindex==2?'active':''" @click="settitindex(2)"><text>帮买中</text></view>
				<view :class="titindex==3?'active':''" @click="settitindex(3)"><text>已完成</text></view>
			</view>
		</view>
		<view class="" style="height: 200rpx;"></view>

		<template v-if="list.length != 0">
			<view class="listbg" v-for="(item,index) in list" :key="index">
				<template v-if="item.allListPic.length>1">
					<view class="listitem" @click="goinfo(item.id)">
						<view class="tit">
							<text>{{item.market.mar_name || '暂无'}} {{item.RefundInfo ? '售后' : ''}}</text>
							<text>{{getTitle(item.groupOrder.buyer_type,item.status,item.RefundInfo)}}</text>
						</view>
						<view class="gray">下单时间: {{item.create_date || '暂无'}}</view>
						<view class="goods">
							<view class="imgbg">
								<image v-if="i < 4" :src="ele.simpleCartInfo.image" v-for="(ele,i) in item.allListPic"
									:key="index">
								</image>
								<image v-if="item.allListPic.length >= 4 " class="dian" src="../static/icon_296@2x.png"
									mode="">
								</image>
							</view>
							<view class="price">
								<view class="">￥<text>{{item.groupOrder.pay_price || '0'}}</text></view>
								<text>共{{item.groupOrder.total_num || '0'}}件</text>
							</view>
						</view>
					</view>
				</template>
				<template v-else>
					<view class="listitem" @click="goinfo(item.id)">
						<view class="tit">
							<text>{{item.market.mar_name || '暂无'}} {{item.RefundInfo ? '售后' : ''}}</text>
							<text>{{getTitle(item.groupOrder.buyer_type,item.status,item.RefundInfo)}}</text>
						</view>
						<view class="goods goods2">
							<image :src="item.allListPic[0].simpleCartInfo.image" mode=""></image>
							<view class="one">
								<text>{{item.allListPic[0].simpleCartInfo.store_name || '暂无介绍'}}</text>
								<text class="gray">下单时间: {{item.create_date || '暂无'}}</text>
							</view>
							<view class="price price2">
								<view class="">￥<text>{{item.RefundInfo ? (item.RefundInfo.refund_type < 3 ? item.RefundInfo.refund_price
								 : item.allListPic[0].product_price) : item.groupOrder.pay_price || '0'}}</text></view>
								<text>共{{item.RefundInfo ? item.RefundInfo.refund_num :item.groupOrder.total_num || '0'}}件</text>
							</view>
						</view>
						<!-- 	<view class="realpay">
							实付金额:￥<text>{{item.groupOrder.total_price || '0'}}</text>
						</view> -->
					</view>
				</template>
			</view>
		</template>

		<view class="nomore" v-else>
			<image src="../static/icon_294@2x.png" mode=""></image>
			<text>暂时没有任何帮买订单</text>
			<text>稍等一下再来吧</text>
		</view>
		<w-picker :visible.sync="visible" mode="range" startYear="2022" endYear="2030" :value="rangeVal"
			:current="false" @confirm="onConfirm($event,'range')" ref="range"></w-picker>
		<u-tabbar :value="value" :fixed="true" :placeholder="true" activeColor="#109C7A">
			<block v-for="(item,index) in tabbar" :key='index'>
				<u-tabbar-item :text="item.name" @click="switchtab(item.url)">
					<image class="u-page__item__slot-icon" slot="active-icon" :src="item.checked_icon">
					</image>
					<image class="u-page__item__slot-icon" slot="inactive-icon" :src="item.no_checked_icon">
					</image>
				</u-tabbar-item>
			</block>
		</u-tabbar>


	</view>
</template>

<script>
	import wPicker from "@/components/w-picker/w-picker.vue";
	export default {
		components: {
			wPicker
		},
		data() {
			return {
				loadingType: 0, //分页
				goData: {
					status: 0,
					page: 1,
					date: '', //时间段
				}, //提交信息
				visible: false,
				date: '',
				titindex: 0,
				list: [],
				value: 0,
				tabbar: [{
						name: '买手订单',
						checked_icon: '../static/cpm_tab-icon_5@2x.png',
						no_checked_icon: '../static/cpm_tab-icon_1@2x.png',
						url: '/P_service/buyer/list'
					},
					{
						name: '骑手订单',
						checked_icon: '../static/cpm_tab-icon_6@2x.png',
						no_checked_icon: '../static/cpm_tab-icon_2@2x.png',
						url: '/P_service/rider/list'
					},
					{
						name: '售后订单',
						checked_icon: '../static/cpm_tab-icon_7@2x.png',
						no_checked_icon: '../static/cpm_tab-icon_3@2x.png',
						url: '/P_service/aftersales/list'
					},
					{
						name: '其他',
						checked_icon: '../static/cpm_tab-icon_8@2x.png',
						no_checked_icon: '../static/cpm_tab-icon_4@2x.png',
						url: '/P_service/other/other'
					}
				]
			}
		},
		watch: {
			//监听状态栏
			titindex(newValue) {
				this.goData.status = newValue;
				this.loadingType = 0;
				this.goData.page = 1;
				this.list = [];
				this.getList();
			}
		},
		onLoad(e) {},
		//上拉加载
		onReachBottom: function() {
			if (this.loadingType == 2) {
				return uni.showToast({
					title: '没有更多了',
					icon: 'none'
				})
			}
			if (this.loadingType != 0) { //loadingType!=0;直接返回
				return false;
			}
			this.goData.page++;
			uni.showNavigationBarLoading(); //显示加载动画				
			this.getList(); //请求
		},
		onShow() {
			this.goData.page = 1;
			this.loadingType = 0;
			this.list = [];
			// 获取列表
			this.getList();
		},
		methods: {
			getTitle(type, index,info) {
				console.log(type,index,info)
				// 状态名获取 
				let buyer_type= info ? '自动派单' : (type==0 ? '自动派单' : '顾客指定')
				switch (index * 1) {
					case 1:
						return '待帮买-'+buyer_type;
					case 2:
						return '帮买中-'+buyer_type;
					case 3:
						return '帮买完成-'+buyer_type;
						case 4:
							return '已取消-'+buyer_type;
				}
			},
			getList() {
				console.log(this.goData)
				this.$request('mar_service/buyerOrder', {
					...this.goData,
					serviceLogin: '111',
				}, 'GET').then(res => {
					console.log(res, '订单列表');
					if (res.status == 200) {
						this.list.push(...res.data.data);
						console.log(this.list, 'list');
						uni.hideNavigationBarLoading(); //关闭加载动画
						//如果长度小于等于0说明没有分页
						if (res.data.data.length < 15) {
							this.loadingType = 2; //没有更多了	
						} else {
							this.loadingType = 0; //请求成功让他返回上拉加载	
						}
						let currentRefundOrderProudctIds = [];
						this.list.forEach((e, i) => {
							let allPicList = []; //商品图片
							let refundList = [];
							if (e.RefundInfo) {
								e.RefundInfo.refundProduct.forEach(refundProduct => {
									currentRefundOrderProudctIds.push(refundProduct.order_product_id)
								})
								// console.log(currentRefundOrderProudctIds)
								e.groupOrder.staffSimpleInfo.forEach((e2, i2) => {
									e2.simpleOrderProduct.forEach((e3, i3) => {
										if (currentRefundOrderProudctIds.indexOf(e3.order_product_id) != -1) {
											console.log(e3.order_product_id)
											allPicList.push(e3)
										}

									})
								})
							} else {
								e.groupOrder.staffSimpleInfo.forEach(e2 => {
									allPicList.push(...e2.simpleOrderProduct);
								})
							}
							this.$set(this.list[i], 'allListPic', allPicList);
						})
						console.log(this.list, '最后的数据');

					}
				})
			},
			switchtab(e) {
				uni.redirectTo({
					url: e
				})
			},
			settitindex(e) {
				this.titindex = e
			},
			onConfirm(e) {
				console.log(e)
				this.date = e.value[0] + ' - ' + e.value[1]
				this.goData.date = e.value[0] + ' - ' + e.value[1]
				this.loadingType = 0;
				this.goData.page = 1;
				this.list = [];
				this.getList();
			},
			showtime() {
				this.visible = true
			},
			goinfo(id) {
				console.log(id)
				uni.navigateTo({
					url: "../orderinfo?id=" + id + "&type=1"
				})
			},
		}
	}
</script>

<style>
	.waimian {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		overflow: hidden;
	}

	.pwdhead {
		position: fixed;
		top: 0;
	}

	.title {
		width: 750rpx;
		height: 80rpx;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #666666;
		box-sizing: border-box;
		padding: 0 90rpx;
		border-radius: 20rpx 20rpx 0px 0px;
		/* position: fixed; */
		/* top: 0; */
		z-index: 4;
		background-color: #F5F5F5;
	}

	.active {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.active text {
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #333333;
	}

	.active::after {
		content: '';
		width: 50rpx;
		position: absolute;
		height: 8rpx;
		background: linear-gradient(64deg, #2BCCA5, #22B591);
		border-radius: 4rpx;
		top: 44rpx;
	}

	.listbg {
		width: 690rpx;
		margin-left: 30rpx;
		margin-bottom: 20rpx;
	}

	.realpay {
		font-size: 24rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		display: flex;
		justify-content: flex-end;
		align-items: baseline;
		margin-top: 6rpx;
	}

	.realpay text {
		font-size: 36rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
	}

	.goodsbtn {
		width: 100%;
		display: flex;
		justify-content: flex-end;
		margin-top: 20rpx;
	}

	.goodsbtn>view {
		width: 160rpx;
		height: 60rpx;
		background: linear-gradient(64deg, #2BCCA5, #22B591);
		box-shadow: 0px 4rpx 6rpx 0px rgba(20, 187, 146, 0.4);
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #FFFFFF;
	}

	.listitem {
		width: 690rpx;
		height: auto;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-top: 30rpx;
		box-sizing: border-box;
		padding: 30rpx;
	}

	.tit {
		display: flex;
		justify-content: space-between;
		font-size: 26rpx;
		align-items: center;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
	}

	.tit text:nth-of-type(2) {
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #F83535;
	}

	.gray {
		font-size: 22rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #999999;
		margin-top: 10rpx;
	}

	.price2>view,
	.price2>view text {
		font-size: 26rpx !important;
		font-family: Microsoft YaHei;
		font-weight: 400 !important;
		color: #333333 !important;
	}

	.price2>text {
		margin-top: 4rpx;
		font-size: 22rpx !important;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #999999 !important;
	}

	.goods2>image {
		width: 140rpx;
		height: 140rpx;
		border-radius: 10rpx;
		/* background: #18BC37; */
		margin-right: 20rpx;

	}

	.one {
		display: flex;
		flex-direction: column;
	}

	.one>text:nth-of-type(1) {
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		line-height: 36rpx
	}

	.goods {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 12rpx;
	}

	.price {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		font-size: 24rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #F83535;
	}

	.price>view text {
		font-size: 36rpx;

		font-weight: bold;

	}

	.price>text {
		font-size: 22rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
	}

	.listitem:first-child {
		margin-top: 0;
	}

	.imgbg {
		display: flex;
		align-items: center;
	}

	.imgbg .dian {
		width: 30rpx;
		height: 8rpx;
	}

	.imgbg image {
		width: 80rpx;
		height: 80rpx;
		border-radius: 10rpx;
		/* background: #18BC37; */
		margin-right: 10rpx;
	}

	page {
		background: #F5F5F5;
	}

	.box {
		width: 750rpx;
		height: 120rpx;
		overflow: hidden;
		background: linear-gradient(180deg, #109C7A 0%, #109C7A 100%);
		position: relative;
		/* 	display: flex;
		align-items: center; */
	}

	.box view:nth-of-type(2) {
		width: 100%;
		height: 40rpx;
		border-radius: 20rpx 20rpx 0px 0px;
		position: absolute;
		bottom: 0;
		background: #F5F5F5;
	}

	.timesc {
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		height: 80rpx;
		margin-left: 30rpx;
	}

	.timesc image {
		width: 36rpx;
		height: 36rpx;
		margin-left: 2rpx;
	}

	.nomore {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #666666;
		overflow: hidden;
	}

	.nomore image {
		width: 306rpx;
		height: 352rpx;
		margin-top: 90rpx;
	}

	.nomore text:nth-of-type(1) {
		font-size: 34rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #333333;
		margin-bottom: 30rpx;
	}

	.nomore>view {
		font-size: 32rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #FFFFFF;
		width: 300rpx;
		height: 100rpx;
		background: linear-gradient(64deg, #2BCCA5, #22B591);
		box-shadow: 0px 4rpx 6rpx 0px rgba(20, 187, 146, 0.4);
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 130rpx;
	}
</style>
